<template>
  <div class="good-list-wrapper">
    <header
        class="h-[50px] leading-[50px] text-center text-[16px] bg-grey-20 font-semibold text-primary"
    >
      {{ title }}
    </header>
    <van-skeleton title :row="3" :loading="loading">
      <div class="flex flex-wrap justify-start">
        <div
            v-for="(item,index) in goods"
            :key="item.goodsId"
            :class="{'border-r border-r-grey-55':index%2==0}"
            class="box-border w-1/2 border-b border-b-grey-55"
            @click="goToDetail(item)"
        >
          <img :src="prefix(item.goodsCoverImg)" alt="" class="w-[120px] block mx-auto">
          <div class="text-[14px] px-[8px] text-center">
            <div class="text-black">{{ item.goodsName }}</div>
            <div class="text-primary my-[4px]">¥ {{ item.sellingPrice }}</div>
          </div>
        </div>
      </div>
    </van-skeleton>
  </div>
</template>
<script setup lang="ts">
import {useRouter} from "vue-router";
import type {IGoodItem} from "@/api/home/getIndexListAPI";


interface IProps {
  title: string,
  loading: boolean,
  goods: IGoodItem[]
}

defineOptions({
  name: 'GoodList',
})
defineProps<IProps>()

const router = useRouter();
const goToDetail = (item: IGoodItem) => {
  router.push({path: `/detail/${item.goodsId}`})
}
const prefix = (url: string) => {
  if (url && url.startsWith('http')) {
    return url
  } else {
    url = `http://backend-api-01.newbee.ltd${url}`
    return url
  }
}
</script>